<!-- 可见性计算 -->
<template>
  <ContentBox class="orbitAltCal">
    <template slot="search">
      <el-form :inline="true" :model="searchInfo" class="form-inline">
        <el-form-item label="卫星代号">
          <el-select
            v-model="searchInfo.satelliteCodes"
            multiple
            collapse-tags
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in sateOptions"
              :key="index"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="day"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="  ">
          <el-checkbox v-model="searchInfo.useMeanKepler">使用平根</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="getTableDate()"
            v-if="$hasEle('control:orbitaltcal:alt')"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </template>
    <template slot="tableData">
      <div class="chart" ref="chart"></div>
    </template>
  </ContentBox>
</template>

<script>

import { getConstellationTreeDataByCode } from '@/api/admin'
import { getGeodeticPositionList } from '@/api/orbit'
import { CODE } from '@/utils/setting'
import ContentBox from '@/components/ContentBox/index.vue'

let mycart = undefined
export default {
  name: 'orbitAltCal',
  components: { ContentBox },
  mounted () {
    this.getSelectOptions();
    this.initChart()
  },
  data () {
    return {
      sateOptions: [],
      searchInfo: {
        satelliteCodes: [],
        useMeanKepler: false
      },
      day: [this.moment().format('YYYY-MM-DD 00:00:00'), this.moment().format('YYYY-MM-DD 23:59:59')],
    };
  },
  methods: {
    initChart () {
      mycart = this.$echarts.init(this.$refs.chart)
      mycart.setOption({});
    },
    getSelectOptions () {
      getConstellationTreeDataByCode(['YK-DICT'])
        .then(res => {
          const { data, code, message } = res;
          if (code == CODE.success) {
            this.sateOptions = this.$store.state.user.satelliteRightData;
            this.searchInfo.satelliteCodes = [this.sateOptions[0].code]
          } else {
            this.$message({
              message: message,
              type: 'error'
            });
          }
        })
        .catch(e => {
          this.$message({
            message: e,
            type: 'error'
          });
        });
    },
    // 查询
    getTableDate () {
      let params = {
        satelliteCodes: this.searchInfo.satelliteCodes,
        useMeanKepler: this.searchInfo.useMeanKepler ? 1 : 0,
        startTime: this.day.length > 0 ? this.day[0] : null,
        endTime: this.day.length > 0 ? this.day[1] : null
      };
      const loading = this.$loading({
        lock: true,
        text: '正在查询，请稍后......',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      getGeodeticPositionList(params).then(res => {
        const { data, code, message } = res;
        if (code === CODE.success) {
          let x = []
          let seriesList = []
          data.forEach(item => {
            let y = []
            item.geodeticPosition.forEach(element => {
              if (!x.includes(element.dateTime)) {
                x.push(element.dateTime)
              }
              y.push(Number(element.altitude))
            });
            seriesList.push({
              name: item.satelliteCode,
              data: y,
              type: 'line'
            })
          });
          mycart && mycart.setOption({
            legend: {
              scrollData: true // 启用滚动
            },
            tooltip: {
              trigger: 'axis', // 坐标轴触发
            },
            grid: {
              top: '10%',
              left: '10%',
              right: '10%',
              bottom: '5%',
            },
            xAxis: {
              type: 'category',
              boundaryGap: ['5%', '5%'],
              data: x
            },
            yAxis: {
              type: 'value',
            },
            series: seriesList
          }, true)
        } else {
          this.$message({
            message: message,
            type: 'error'
          });
        }
        loading.close();
      }).catch(error => {
        loading.close();
      });
    },
  }
};
</script>
<style scoped lang="scss">
.orbitAltCal {
  .form-inline {
    ::v-deep .el-tag.el-tag--info {
      max-width: 118px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .chart {
    width: 100%;
    height: 100%;
    padding: 15px;
  }
}
</style>
